<template>
	<view class="yyRes">
		<view class="tips">
			<template v-if="cancelFlag == false">
				<view class="yyResTxt">预约成功</view>
				<view>您已预约咨询师成功，请按时到咨询师所在地咨询，无故旷约将会影响您下次预约的功能，如不能按时咨询请取消本次预约。</view>
			</template>
			<template v-else>
				<view class="yyResTxt">取消预约成功</view>
				<view>您已成功取消本次咨询预约,如有需要请返回咨询师详情页面再次预约</view>
			</template>
		</view>
		<view class="modCon">
			<view class="modConTop hasFlex">
				<view class="userImg">
					<image class="samePar" mode="aspectFill" :src="zxOrderInfo.zjImg"></image>
				</view>
				<view class="userInfo">
					<view class="spaceBet">
						<text class="zxsName">{{zxOrderInfo.zxsName}}</text>
						<view class="cancelBtn cancel" v-if="cancelFlag == false" @tap="goCancel">取消预约</view>
						<view class="cancelBtn hasCancel" v-else>已取消</view>
					</view>
					<view class="zxTimes">近{{zxOrderInfo.serviceTimes}}人次咨询</view>
					<view class="zxTime">单次时长{{zxOrderInfo.zxMinute}}分钟</view>
				</view>
			</view>
			<view class="conItem">
				<view class="itemTit">咨询时间</view>
				<view class="itemCon">{{zxOrderInfo.zxDate}}  {{zxOrderInfo.classTime}}</view>
			</view>
			<view class="conItem">
				<view class="itemTit">咨询地址</view>
				<view class="itemCon">
					<text class="iconfont icon-dingwei"></text>
					<text>{{zxOrderInfo.zzAddress}}</text>
				</view>
			</view>
			<view class="conItem">
				<view class="itemTit">联系电话</view>
				<view class="itemCon">{{zxOrderInfo.zzLxTel}}</view>
			</view>
		</view>
		<view class="comBtn" @tap="goBack">返回咨询师详情</view>
		<common-alert :showAlertFlag="showAlertFlag" :maskClosable="maskClosable">
			<view class="alertContent">是否确定取消本次咨询预约?</view>
			<view class="tui-alert-btn" :hover-stay-time="150">
				<view class="cancelBtn" @tap.stop="cancel">取消</view>
				<view class="sureBtn" @tap="sureCancel">确认</view> 
			</view>
		</common-alert>
	</view>
</template>

<script>
	import { cancelXlzx } from '@/api/xlzx/index.js'
	export default {
		data(){
			return{
				zxOrderInfo:null,
				cancelFlag:false,
				maskClosable:false,
				showAlertFlag:false,
			}
		},
		onLoad(){
			this.zxOrderInfo = uni.getStorageSync('zxOrderInfo');
		},
		onUnload(){
			uni.removeStorageSync('zxOrderInfo');
		},
		methods:{
			goCancel(){
				this.showAlertFlag = true;
			},
			sureCancel(){
				uni.showLoading({ title: '取消中...', mask: true });
				let field = { id:this.zxOrderInfo.xlzxId }
				cancelXlzx(field).then(res=>{
					uni.showToast({ title: '取消成功' });
					setTimeout(()=>{
						this.showAlertFlag = false;
						this.cancelFlag = true;
					},1500);
				}).catch(err=>{
					this.showAlertFlag = false;
				})
			},
			cancel(){
				this.showAlertFlag = false;
			},
			goBack(){
				uni.navigateBack({
					delta:2
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("/static/css/common/alert.css");
	.yyRes{
		padding: 30rpx;
		.tips{
			background: $pss-color-blue-lighter;
			border-radius: 10rpx;
			font-size: 26rpx;
			color: $pss-color-blueDeep;
			padding: 30rpx 20rpx;
			margin-bottom: 30rpx;
			.yyResTxt{
				font-size: 34rpx;
				color: #FF5F5F;
				text-align: center;
				font-weight: 600;
				margin-bottom: 15rpx;
			}
		}
		.modCon{
			padding: 20rpx;
			box-shadow: 0 0 16rpx rgba(127, 188, 255, .2);
			border-radius: 10rpx;
			margin-bottom: 30rpx;
		}
		.modConTop{
			margin-bottom: 30rpx;
		}
		.userImg{
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			margin-right: 15rpx;
			.samePar{
				border-radius: 10rpx;
			}
		}
		.userInfo{
			flex: 1;
			--comHei:40rpx;
			.spaceBet{
				align-items: center;
			}
			.zxsName{
				font-size: 34rpx;
				color: $pss-text-color0;
				font-weight: 600;
			}
			.cancelBtn{
				height: calc(var(--comHei) + 2rpx);
				line-height: calc(var(--comHei) + 2rpx);
				padding: 0 15rpx;
				font-size: 24rpx;
				border-radius: 6rpx;
				&.cancel{
					background: #4D84F9;
					color: #fff;
				}
				&.hasCancel{
					background: #F4F5F7;
					color: $pss-text-colora;
				}
			}
			.zxTimes{
				margin: 10rpx 0 15rpx;
				font-size: 24rpx;
				color: $pss-text-color8;
			}
			.zxTime{
				width: 200rpx;
				color: $pss-color-blueDeep;
				font-size: 24rpx;
				height: var(--comHei);
				line-height: var(--comHei);
				border: 1rpx solid #E3E3EB;
				text-align: center;
				border-radius: 6rpx;
			}
		}
		.conItem{
			display: flex;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			.itemTit{
				width: 200rpx;
				color: $pss-text-color0;
				flex-shrink: 0; 
			}
			.itemCon{
				flex: 1;
				color: $pss-text-color6;
				text-align: right;
				.icon-dingwei{
					color: $pss-color-blue-light;
					margin-right: 5rpx;
				}
			}
		}
		.comBtn{
			margin-top: 80rpx;
			font-size: 30rpx;
			background: $pss-color-blueDeep;
			border-radius: 50rpx;
		}
	}
	
</style>